<template>
  <div class="consultation-list">
    <webHader
      :title="$t('consultationIndex.title')"
      :crumbs="$t('consultationIndex.crumbs')"
      :backgroundImageUrl="headerBg"
    />
    <div class="content" v-loading="loading">
      <consultationList
        :key="`list-${pageNum}-${pageSize}`"
        @handleGoDetail="handleGoDetail"
        :dataList="dataList"
      />
      <Pagination
        :background="true"
        :total="total"
        :current-page.sync="pageNum"
        :page-size.sync="pageSize"
        @pagination-change="paginationChange"
        class="pagination"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import headerBg from "~/assets/web/consultation-header-bg.png";
import { GetInformationList } from "~/apis/web";
const pageNum = ref(1);
const pageSize = ref(10);
const dataList = ref([]);
const total = ref(0);
const loading = ref(false);

const paginationChange = async (val) => {
  pageNum.value = val.currentPage;
  pageSize.value = val.pageSize;
  getLists();
};

const handleGoDetail = (consultationId) => {
  const { $navigate } = useNuxtApp();
  $navigate(`/web/consultation/${consultationId}`);
};

const getLists = async () => {
  loading.value = true;
  dataList.value = [];
  let params = {
    pageNo: pageNum.value,
    pageSize: pageSize.value,
  };
  const result = await GetInformationList(params);
  if (result.code == 0) {
    dataList.value = result.data.list;
    total.value = Number(result.data?.total) || 0;
  }
  loading.value = false;
};

getLists();
</script>

<style lang="less" scoped>
.consultation-list {
  width: 100%;

  .content {
    margin: 0 auto;
    box-sizing: border-box;
    padding: 30px 104px;
  }

  .pagination {
    width: 100%;
    padding: 0px 0 30px;
    box-sizing: border-box;

    :deep(.el-pagination) {
      justify-content: flex-start;
    }

    :deep(.el-pager li:hover) {
      color: #1d1b1b !important;
    }

    :deep(.is-active) {
      background-color: #1d1b1b !important;
    }

    :deep(.el-pager .is-active:hover) {
      color: #ffffff !important;
    }
  }
}
</style>
